<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>存储配置</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="/static/js/jquery.min.js?v=2.1.4"></script>
    <script src="/static/js/base.js"></script>
    <link rel="stylesheet" href="/static/layui/css/layui.css" media="all">
    <script src="/static/layui/layui.2.7.6.js"></script>
    <script src="/static/ueditor/ueditor.config.js"></script>
    <script src="/static/ueditor/ueditor.all.min.js"></script>
</head>
<body>

<div style="padding: 30px;background-color: #fff">
    <div class="layui-row layui-col-space15">
        <form class="layui-form" action="" lay-filter="formFilter" style="margin-top: 50px;">
            <div class="layui-form-item">
                <label class="layui-form-label">名称</label>
                <div class="layui-input-block">
                    <input type="text" name="name" lay-verify="name" required autocomplete="off" placeholder="" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">键名</label>
                <div class="layui-input-block">
                    <input type="text" name="key" lay-verify="key" disabled autocomplete="off" placeholder="" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">存储类型</label>
                <div class="layui-input-block">
                    <input type="radio" name="storage_type" checked value="1" lay-filter="storage_type" title="本地">
                    <input type="radio" name="storage_type" value="2" lay-filter="storage_type" title="阿里云">
                    <input type="radio" name="storage_type" value="3" lay-filter="storage_type" title="七牛云">
                </div>
                <div class="layui-form-mid layui-word-aux">阿里云、七牛云的参数配置是由项目.env文件决定，不可被手动修改</div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">本地存储Host</label>
                <div class="layui-input-block">
                    <input type="text" name="host" lay-verify="host"  autocomplete="off" placeholder="如：http://hypercmf.com" class="layui-input">
                </div>
                <div class="layui-form-mid layui-word-aux">阿里云七牛云可以忽略</div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">access_id</label>
                <div class="layui-input-block">
                    <input type="text" name="access_id" lay-verify="access_id" disabled autocomplete="off" placeholder="" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">access_secret</label>
                <div class="layui-input-block">
                    <input type="text" name="access_secret" lay-verify="access_secret" disabled autocomplete="off" placeholder="" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">protocol</label>
                <div class="layui-input-block">
                    <input type="text" name="protocol" lay-verify="protocol" disabled autocomplete="off" placeholder="http://或https://" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">bucket</label>
                <div class="layui-input-block">
                    <input type="text" name="bucket" lay-verify="bucket" disabled autocomplete="off" placeholder="" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">endpoint</label>
                <div class="layui-input-block">
                    <input type="text" name="endpoint" lay-verify="endpoint" disabled autocomplete="off" placeholder="" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">style</label>
                <div class="layui-input-block">
                    <input type="text" name="style" lay-verify="style" disabled autocomplete="off" placeholder="" class="layui-input">
                </div>
                <div class="layui-form-mid layui-word-aux">图片处理，如阿里云：?x-oss-process=style/stylename</div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">限制图片后缀</label>
                <div class="layui-input-block">
                    <input type="text" name="image_suffix" lay-verify="image_suffix"  value="png,jpg,jpeg,gif" autocomplete="off" placeholder="" class="layui-input">
                </div>
                <div class="layui-form-mid layui-word-aux">如：png,jpg,jpeg，用英文逗号隔开</div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">限制音视频后缀</label>
                <div class="layui-input-block">
                    <input type="text" name="video_suffix" lay-verify="video_suffix" value="mp4,mov,flv,wmv,avi,mp3,m4a,wav,acc,au" autocomplete="off" placeholder="" class="layui-input">
                </div>
                <div class="layui-form-mid layui-word-aux">如：mp4,mp3,m4a，用英文逗号隔开</div>

            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">限制文件后缀</label>
                <div class="layui-input-block">
                    <input type="text" name="file_suffix" lay-verify="file_suffix" value="xls,xlsx,doc,docx,ppt,pptx,zip,rar" autocomplete="off" placeholder="" class="layui-input">
                </div>
                <div class="layui-form-mid layui-word-aux">如：xls,xlsx,doc,docx,zip,ppt，用英文逗号隔开</div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <input type="hidden" name="id"  autocomplete="off" placeholder="" class="layui-input">
                    <button type="button" class="layui-btn" lay-submit="" lay-filter="lay-form">立即提交</button>
                </div>
            </div>
        </form>
    </div>
</div>
<script>
    var data=[];
    layui.use(['form', 'util', 'laydate','layer'], function(){
        var form = layui.form;
        var layer = layui.layer;
        var util = layui.util;
        var laydate = layui.laydate;

        //日期
        laydate.render({
            elem: '#date'
        });
        laydate.render({
            elem: '#date1'
        });

        $.ajax({
            url:'/admin/system/storage',
            data:{key:'storage'},
            async:false,
            type:'get',
            dataType:'json',
            headers:{
                'token':localStorage.getItem('hypercmfname')+'_'+localStorage.getItem('token'),
                'accept':'*/*'
            },
            success:function(res){
                if(res.code==1){
                    data = res.data
                    form.val('formFilter', {
                        "id": data.id,
                        "name": data.name,
                        "key": data.key,
                        "storage_type": data.value.storage_type,
                        "host": data.value.host,
                        "protocol": data.value.protocol,
                        "access_id": data.value.access_id,
                        "access_secret": data.value.access_secret,
                        "bucket": data.value.bucket,
                        "endpoint": data.value.endpoint,
                        "style": data.value.style,
                        "image_suffix": data.value.image_suffix,
                        "video_suffix": data.value.video_suffix,
                        "file_suffix": data.value.file_suffix,
                    });
                    layui.$('#uploadView').removeClass('layui-hide').find('img').attr('src', data.thumbnail);
                }else{
                    layer.alert(res.msg,{icon:5})//1√，2×，3问号，4锁，5不开心，6开心
                }
            },fail:function(res){
                layer.alert('请求失败',{icon:2})
            }
        })
        //自定义验证规则
        form.verify({
            role_name: function(value){
                if(value.length < 2){
                    return '标题至少得2个字符啊';
                }
            }
        });
        form.on('radio(storage_type)', function(e){
            var elem = e.elem; // 获得 radio 原始 DOM 对象
            var checked = elem.checked; // 获得 radio 选中状态
            var value = elem.value; // 获得 radio 值
            //var othis = data.othis; // 获得 radio 元素被替换后的 jQuery 对象
            if(value==1){
                form.val('formFilter', {
                    "protocol": '',
                    "access_id": '',
                    "access_secret": '',
                    "bucket": '',
                    "endpoint": '',
                    "style": '',
                });
            }else if(value==2){
                form.val('formFilter', {
                    "protocol": data.aliyun.protocol,
                    "access_id": data.aliyun.access_id,
                    "access_secret": data.aliyun.access_secret,
                    "bucket": data.aliyun.bucket,
                    "endpoint": data.aliyun.endpoint,
                    "style": data.aliyun.style,
                });
            }else if(value==3){
                form.val('formFilter', {
                    "protocol": data.qiniu.protocol,
                    "access_id": data.qiniu.access_id,
                    "access_secret": data.qiniu.access_secret,
                    "bucket": data.qiniu.bucket,
                    "endpoint": data.qiniu.endpoint,
                    "style": data.qiniu.style,
                });
            }
        });
        //提交事件
        form.on('submit(lay-form)', function(data){
            // console.log(JSON.stringify(data.field));
            var load = layer.load(0, {shade: [0.3,'#fff']});
            $.ajax({
                url:'/admin/system/storage',
                data:data.field,
                async:false,
                type:'post',
                dataType:'json',
                headers:{
                    'token':localStorage.getItem('hypercmfname')+'_'+localStorage.getItem('token'),
                    'accept':'*/*'
                },
                success:function(res){
                    if(res.code==1){
                        layer.msg('操作成功',{
                            icon: 1,
                            time: 3000 //1秒关闭（如果不配置，默认是3秒）
                        },function () {
                            layer.close(load)
                        })

                    }else{
                        layer.alert(res.msg,{icon:5})//1√，2×，3问号，4锁，5不开心，6开心
                    }
                },fail:function(res){
                    layer.alert('请求失败',{icon:2})
                }
            })
        });


    });
    function upload(from=''){
        layui.layer.open({
            title: '选择图片',
            type: 2,
            shadeClose:true,
            area: ['90%','90%'],
            content: '/admin/public/file_list.html?from='+from
        })
    }
    //layer弹出的子页面传值到当前页面
    function GetChildValue(data,from=''){
        if(from == 'video'){
            $("input[name=video]").attr("value",data[0].id)
        }else if(from == 'thumbnail'){
            console.log(from,data)

            $("input[name=thumbnail]").attr("value",data[0].url)
            layui.$('#uploadView').removeClass('layui-hide').find('img').attr('src', data[0].url);
        }
    }
</script>

</body>
</html>